<template>
  <div class="cates">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item> 分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <span>请选择商品分类</span>
      <el-cascader
        v-model="goods_cat"
        :options="categories"
        :props="{ expandTrigger: 'hover', ...cateProps }"
      ></el-cascader>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="动态参数" name="many">
        <el-button
          type="primary"
          size="small"
          @click="manyDialog = true"
          :disabled="goods_cat.length < 3"
          >设置动态参数</el-button
        >
        <el-table :data="many" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-tag
                closable
                v-for="item in props.row.attr_vals"
                :key="item.attr_id"
                >{{ item }}</el-tag
              >
              <el-input
                v-if="props.row.inptStatus"
                v-model="props.row.inptValue"
                @keydown.enter.native="handleManyAdd(props.row)"
              ></el-input>
              <el-button v-else size="mini" @click="props.row.inptStatus = true"
                >+ new Tag</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="属性名称" prop="attr_name"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                size="mini"
                @click="handleManyEdit(scope.row)"
              ></el-button>
              <el-button icon="el-icon-delete" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态参数" name="only">配置管理</el-tab-pane>
    </el-tabs>

    <el-dialog title="设置动态参数" :visible.sync="manyDialog" width="30%">
      <el-form ref="many" :model="manyParams">
        <el-form-item label="属性名称" prop="attr_name">
          <el-input v-model="manyParams.attr_name" />
        </el-form-item>
        <!-- <el-form-item label="属性值">
          <a-select
            mode="tags"
            size="small"
            placeholder="Please select"
            :default-value="['a1', 'b2']"
            style="width: 200px"
          >
            <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
              {{ (i + 9).toString(36) + i }}
            </a-select-option>
          </a-select>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="manyDialog = false">取 消</el-button>
        <el-button type="primary" @click="addManyParams">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑动态参数" :visible.sync="manyEditDialog" width="30%">
      <el-form ref="manyEdit" :model="manyEditParams">
        <el-form-item label="属性名称" prop="attr_name">
          <el-input v-model="manyEditParams.attr_name" />
        </el-form-item>
        <!-- <el-form-item label="属性值">
          <a-select
            mode="tags"
            size="small"
            placeholder="Please select"
            :default-value="['a1', 'b2']"
            style="width: 200px"
          >
            <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
              {{ (i + 9).toString(36) + i }}
            </a-select-option>
          </a-select>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="manyEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="editManyParams">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCategories, getAttrs, addParams, editParams } from "@/http/api";

// import { Select } from "ant-design-vue";
// import Vue from "vue";
// Vue.use(Select);
export default {
  data() {
    return {
      goods_cat: [],
      categories: [],
      cateProps: {
        value: "cat_id",
        label: "cat_name",
      },
      activeName: "many",
      many: [],
      only: [],
      manyDialog: false,
      tags: [],
      manyParams: {
        attr_name: "",
      },
      manyEditDialog: false,
      manyEditParams: {
        attr_name: "",
      },
      attr_id: "",
    };
  },
  watch: {
    goods_cat: {
      deep: true,
      handler() {
        this.getAttrs();
        this.getAttrs("only");
      },
    },
  },
  methods: {
    //获取三级分类列表
    async getCategories() {
      const res = await getCategories();
      this.categories = res;
    },
    //获取动态静态参数
    async getAttrs(val) {
      const res = await getAttrs({
        id: this.goods_cat.at(-1),
        sel: val || this.activeName,
      });
      if (val || this.activeName === "many") {
        res.forEach((item) => {
          if (item.attr_vals) {
            item.attr_vals = item.attr_vals.split(",");
          } else {
            item.attr_vals = [];
          }
          item.inptStatus = false;
          item.inptValue = "";
        });
      }
      this[val || this.activeName] = res;
    },
    //添加动态参数
    async addManyParams() {
      await addParams({
        id: this.goods_cat.at(-1),
        attr_name: this.manyParams.attr_name,
        attr_sel: "many",
      });
      this.$refs.many.resetFields();
      this.getAttrs();
      this.manyDialog = false;
    },
    //编辑动态参数
    async editManyParams() {
      await editParams({
        id: this.manyEditParams.cat_id,
        attr_id: this.manyEditParams.attr_id,
        attr_name: this.manyEditParams.attr_name,
        attr_sel: this.activeName,
      });
      this.getAttrs();
      this.manyEditDialog = false;
    },
    //显示编辑动态参数弹窗
    handleManyEdit(val) {
      this.manyEditDialog = true;
      this.manyEditParams = { ...val };
    },
    //添加动态参数值
    async handleManyAdd(obj) {
      if (!obj.inptValue.trim()) return;
      await editParams({
        id: obj.cat_id,
        attr_name: obj.attr_name,
        attr_id: obj.attr_id,
        attr_sel: this.activeName,
        attr_vals: [...obj.attr_vals, obj.inptValue].join(","),
      });

      obj.attr_vals = [...obj.attr_vals, obj.inptValue];
      obj.inptValue = "";
      obj.inptStatus = false;
      //   this.getAttrs();
    },
  },
  created() {
    this.getCategories();
  },
};
</script>

<style></style>
